<template>
  <div class="header">
    <!-- element调整图标大小用size -->
    <div class="header-left">
      <h3 v-show="!isCollapse">金坤教育后台管理系统</h3>
      <h3 v-show="isCollapse">金坤</h3>
    </div>

    <div class="header-right">
      <div class="l-content">
        <i plain @click="collapseMenu" :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" size="mini"></i>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="current.path" v-if="current">
            {{ current.label }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="r-content">
        <el-dropdown szie="mini">
          <span class="el-dropdown-link"> <img :src="userImg" class="userImg" alt="" /> </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <!-- .native修饰符:代表使用原生的点击事件； 因为这个组件没有提供click -->
            <el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'homeHeader',
  data() {
    return {
      userImg: require('@/assets/images/im1.png')
    }
  },
  computed: {
    ...mapState({
      current: state => state.tab.currentMenu,
      isCollapse: state => state.tab.isCollapse
    })
  },
  methods: {
    collapseMenu() {
      this.$store.dispatch('collapseMenu')
    },
    logOut() {
      // 退出操作
      this.$store.commit('clearToken')
      this.$store.commit('clearMenu')
      location.reload() // 刷新浏览器
    }
  },
  mounted() {
    console.log(this.current)
  }
}
</script>

<style lang="stylus" scoped>
.header >>> .el-breadcrumb__item
  .el-breadcrumb__inner
    color #666
  &:last-child
    .el-breadcrumb__inner
      color #f3f3f3
.header
  height 100%
  display flex
  align-items center
.el-dropdown-link
    cursor pointer
    color #fff
  .el-icon-arrow-down
    font-size 12px
.header-right
  flex 1
  margin-left: 2%;
  display flex
  justify-content space-between
  .l-content
    display flex
    align-items center
    .el-breadcrumb
      margin-left 20px
  .r-content
    .userImg
      width 40px
      height 40px

.header >>> .el-button--small,
.el-button--small.is-round {
  padding: 7px 12px;
}
.header >>> .el-icon-s-fold,
.header >>> .el-icon-s-unfold {
  font-size: 29px;
  color: #ffffff;
  cursor: pointer;
}
h3 {
  color: #ffffff;
}
</style>
